<template>
  <div class="table-bar">
    <div class="top-wrap" v-show="showSearchWrap">
      <slot name="top">
        
      </slot>
      <div class="buttons">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="bottom-wrap" v-if="showBottom">
      <div class="left-wrap">
        <slot name="bottom"></slot>
      </div>
      <div class="right-wrap">
        <el-button-group>
          <el-button icon="el-icon-search" @click="isShowSearchWrap()" v-if="layout.indexOf('search') !== -1"/>
          <el-button icon="el-icon-refresh-right" @click="refresh()" v-if="layout.indexOf('refresh') !== -1"/>
          <el-button slot="reference" icon="el-icon-s-operation"/>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from "vue"
  import { useSettingStore } from "../../store/modules/setting"

  const emit = defineEmits(['search', 'reset'])

  const props = defineProps({
    showTop: {
      type: Boolean,
      default: true
    },
    showBottom: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default: []
    },
    layout: {
      type: String,
      default: 'search, refresh, column'
    }
  })

  const settingStore = useSettingStore()
  const showSearchWrap = ref(true)
  const colOptions = ref([])
  const colSelect = ref([])
  const columnChage = ref(false)

  onMounted(() => {
    showSearchWrap.value = props.showTop
  })

  // 刷新页面
  function refresh() {
    settingStore.reload()
  }

  // 是否显示搜索区域
  function isShowSearchWrap() {
    showSearchWrap.value = !showSearchWrap.value
  }

  // 列显示隐藏
  function showPopover() {
    // if(!this.columnChage) {
    //   let ops = []
    //   this.columns.map(item => { ops.push(item.name) })
    //   this.colOptions = ops
    //   this.colSelect = ops
    //   this.columnChage = true
    // }
  }

  // 选择列
  function changeColumn(show: boolean, index: number) {
    // let columns = this.columns

    // columns.map((item, i) => { 
    //   if(index === i) {
    //     item.show = show
    //   }
    // })

    // this.$emit('changeColumn', columns)
  }

  function search() {
    emit('search')
  }

  function reset() {
    emit('reset')
  }
</script>

<style lang="scss" scoped>
  .table-bar {
    padding: 0 0 20px 0;

    .top-wrap {
      transition: height .3s;
      position: relative;

      .buttons {
        position: absolute;
        right: 0;
        bottom: 20px;
      }
    }

    .bottom-wrap {
      display: flex;
      justify-content: space-between;
    }
  }

  .el-button-group {
    display: flex;
  }

  @media screen and (max-width: $device-phone){
    .el-form {
      padding-bottom: 15px;
    }
  }
</style>